<template>
  <div class="personnel">
    <MyHeader />
    <Form>
      <Row>董事</Row>
      <FormItem>
        <div class="personnel_tip">(公司根据情况选择是否成立董事会)</div>
        <RadioGroup v-model="formItem.isboard" vertical>
          <Radio label="2" >
            <div class="personnel_radio">
              <p>不设立董事会</p>
              <span>(仅设立执行董事1人)</span>
            </div>
          </Radio>
          <Radio label="1" >
            <div class="personnel_radio">
              <p>设立董事会</p>
              <span>(董事会成员为3-13人，其中董事长1人)</span>
            </div>
          </Radio>
        </RadioGroup>
      </FormItem>
      <Row>监事</Row>
      <FormItem>
        <div class="personnel_tip">(公司需根据情况选择是否成立监事会；监事，必须为董事长(执行董事)、董事、经理、财务之外的人员)</div>
        <RadioGroup v-model="formItem.issuped" vertical>
          <Radio label="2">
            <span>不设立监事会，监事1-2人</span>
          </Radio>
          <Radio label="1">
            <div class="personnel_radio">
              <p>设立监事会</p>
              <span>(监事人数至少为3人，其中设监事会主席1人)</span>
            </div>
          </Radio>
        </RadioGroup>
      </FormItem>
    </Form>
    <div class="personnel_bottom">
      <div class="bottom">
        <Button type="warning" @click="saveInfo">保存</Button>
        <Button type="primary" @click="gotoNext">下一步</Button>
      </div>
    </div>
    <MyFooter/>
  </div>
</template>

<script>
  import MyHeader from '../../components/MyHeader.vue'
  import MyFooter from '../../components/MyFooter.vue'
  import request from '../../utils/request'
  export default {
    data() {
      return {
        formItem: {
          isboard: '2',
          issuped: '2'
        }
      }
    },
    components: {
      MyHeader,
      MyFooter
    },
    methods: {
      queryBoard() {
         request.get('/interface/apply/cp/setup/queryBoard.do', {gid: sessionStorage.getItem('gid')}
          ).then(response => {
            if (response.data.result === 'error') {
              this.$ErrorAlert(response.data.message)
            } else if (response.data.result === 'success') {
              this.formItem.isboard = response.data.data.isboard || '2'
              this.formItem.issuped = response.data.data.issuped || '2'
            }
          })
      },
      save(isNext) {
        this.formItem.gid = sessionStorage.getItem('gid')
        let postData = new FormData()
        postData.append('entForm', JSON.stringify(this.formItem))

        request.post('/interface/apply/cp/setup/updateBoard.do', postData
          ).then(response => {
            if (response.data.result === 'error') {
              this.$ErrorAlert(response.data.message)
            } else if (response.data.result === 'success') {
                if (isNext) {
                  sessionStorage.setItem('formItem', JSON.stringify(this.formItem))
                  this.$router.push({name: 'CompanyMemList'})
              } else {
                this.$SuccessAlert('保存成功')
              }
            }
          })
      },
      saveInfo() {
        this.save(false)
      },
      gotoNext() {
        this.save(true)
      }
    },
    mounted() {
      this.queryBoard()
    }
  }

</script>

<style lang="scss">
  .personnel {
    position: relative;
    min-height: 100%;
    padding-bottom: 4rem;
    form {
      .ivu-row {
        padding: 0 0.54rem;
        height: 1.75rem;
        line-height: 1.75rem;
        background: #f3f3f3;
      }
      .ivu-form-item {
        padding: 0.54rem;
      }
      .ivu-radio-wrapper {
        font-size: 0.57rem;
        margin: 0.32rem 0;
        .ivu-radio-inner {
          width: 18px;
          height: 18px;
          &::after {
            width: 10px;
            height: 10px;
            top: 50%;
            left: 50%;
            transform: translate3d(-50%, -50%, 0);
          }
        }
      }
    }
    &_tip {
      color: #aaa;
      line-height: 1.5;
    }
    &_radio {
      width: 80%;
      float: right;
      line-height: 1.2;
      span {
          font-size: 0.43rem;
          color: #aaa;
        }
    }
    &_bottom {
      // position: absolute;
      width: 100%;
      height: 3.5rem;
      // bottom: 0;
    }
  }
.bottom {
    display: flex;
    justify-content: space-around;
    // padding: 0.54rem;
    button {
      width: 45%;
      padding-top: 0.36rem;
      padding-bottom: 0.36rem;
      font-size: 0.57rem;
    }
  }
</style>
